<template>
	<u-popup v-model="showPop" mode="bottom" border-radius="24">
		<view class="popup-bg">
			<view class="form-area-bg">
				<view class="form-area">
					<u-form ref="uForm" :model="formData" :error-type="['toast']" :rules="rules">
						<u-form-item prop="type" labelWidth="170" :label-style="{
							fontSize:'32rpx'
						}" label="类型" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161450537302785.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false">
							<u-radio-group v-model="formData.type">
								<u-radio name="0">个人</u-radio>
								<u-radio name="1">企业</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item prop="name" labelWidth="170" label="姓名" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417bca3a8105.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false">
							<u-input v-model="formData.name" placeholder="请输入姓名" />
						</u-form-item>
						
						<u-form-item prop="phone" labelWidth="170" label="手机号" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/202407231614175e2115595.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false">
							<u-input v-model="formData.phone" placeholder="请输入手机号" />
						</u-form-item>
						<u-form-item prop="id_code" labelWidth="170" label="身份证" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161450537302785.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false">
							<u-input v-model="formData.id_code" placeholder="请输入身份证" />
						</u-form-item>
						<u-form-item prop="company_name" labelWidth="170" label="企业名称" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/20240723161417a2e6c4450.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false"
							v-if="formData.type == 1">
							<u-input v-model="formData.company_name" placeholder="请输入企业名称" />
						</u-form-item>
						<u-form-item prop="image" labelWidth="170" label="营业执照" :leftIcon="'https://resource.lanbaozixun.com/uploads/images/202407231614187f9775280.png'" :leftIconStyle="{
							width:'38rpx',
							height:'38rpx',
							position:'relative',
							transform:'translateY(25%)'
						}" :border-bottom="false" label-position="top"
							v-if="formData.type == 1">
							<uploader :previewSize="'100%'" @after-read="afterRead" :file-list="fileList" :max-upload="1"
								:deletable="true" useSlot @delete="handleDelete">
								<view class="column-center">
									<view class="upload-area row-center">
										<u-icon size="60" color="#86909C" name="camera-fill" />
									</view>
								</view>
							</uploader>
						</u-form-item>
					</u-form>
					<u-button type="primary" :custom-style="{
						width:'90%',
						margin: '40rpx auto 0',
						borderRadius:'100rpx',
						background: 'linear-gradient(180deg, #6BB2FF 0%, #437EEA 100%)'
					}" @click="applyProduct">保存</u-button>
					<view class="u-tips-color u-text-center nr u-padding-top-30" @click="showPop = false">
						暂不申请
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		createCustomer
	} from '@/api/new';
	export default {
		name: "product-apply-form",
		data() {
			return {
				formData: {
					type: 0,
					image: '',
					name: '',
					phone: '',
					id_code: '',
					company_name: '',
				},
				fileList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					id_code: [{
							required: true,
							message: '请输入身份证号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					company_name: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							if (this.formData.type == 1) {
								return this.$u.test.isEmpty(value)?false:true;
							} else {
								return true;
							}
						},
						message: '请输入公司名称',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		props: {
			value: {
				type: Boolean,
				required: true,
				default: false
			},
			// 产品ID
			id: {
				type: Number,
				default: 0
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
		methods: {
			applyProduct() {
				const _this = this;
				_this.$refs.uForm.setRules(_this.rules);
				if (_this.fileList[0] && !_this.$u.test.isEmpty(_this.fileList[0]['base_url'])) {
					_this.formData['image'] = _this.fileList[0]['base_url']
				}
				let {
					type,
					name,
					image,
					phone,
					id_code,
					company_name
				} = _this.formData;
				
				_this.$refs.uForm.validate(valid => {
					console.log(valid)
					if (valid) {
						createCustomer({
							id:_this.id,
							type:type,
							name:name,
							phone:phone,
							image:image,
							id_code:id_code,
							company_name:company_name,
						}).then(res => {
							if (res.code == 1) {
								uni.redirectTo({
									url: '/pages/product/qr_code_tow?id=' + res.data
								})
							} else {
								_this.$u.toast(res.msg);
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.popup-bg{
		padding-top: 10vh;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(224, 242, 255, 1) 23.69%, rgba(110, 196, 255, 1) 72.53%, rgba(65, 178, 255, 1) 100%);
		background-image: url('https://resource.lanbaozixun.com/uploads/images/202407221641257d4b01953.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	.form-area-bg{
		border-radius: 30rpx 30rpx 0 0;
		padding: 24rpx 24rpx 0;
		background: url('https://resource.lanbaozixun.com/uploads/images/20240722164943621888328.png');
		background-size: 100% 100%;
	}

	.form-area {
		background: white;
		padding: 12rpx 24rpx;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
	}


	.u-form-item {
		padding: 16rpx 0;
	}


	.uploader-container {
		width: 100%;

		.uplader-upload-slot {
			width: 100% !important;
			height: auto;
		}

		.column-center {
			width: 100%;

			.upload-area {
				width: 100%;
				height: 196rpx;
				border: 4rpx dashed #E5E5E5;
				border-radius: 10rpx;
				background-color: #FAFAFA;

				image {
					width: 74rpx;
					height: 64rpx;
				}
			}
		}

	}
</style>